<template>
  <div id='wrap'>
    <h1>命名视图</h1>
    <RouterView name="header" class="header" :to="{name:'scu33Son2',params:{id:'1'}}"></RouterView>
    <br>
    <RouterView class="body" :to="{name:'scu33Son2',params:{id:'2'}}"></RouterView>
    <br>
    <RouterView name="footer" class="footer" :to="{name:'scu33Son2',params:{id:'3'}}"></RouterView>
    <br>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu34',
}
</script>

<script lang='ts' setup>
import { ref } from 'vue'
</script>

<style scoped lang='scss'>
.header{
  width: 100%;
  height: 30vh;
  background-color: red;
}
.body{
  width: 100%;
  height: 40vh;
  background-color: blue;
}
.footer{
  width: 100%;
  height: 20vh;
  background-color: yellow;
}
</style>
